<template>
  <div>
    <el-form :inline="true" :model="form1" class="demo-form-inline">
      <el-form-item label="租客姓名">
        <el-input v-model="form1.tenant_name" placeholder="请输入租客姓名"></el-input>
      </el-form-item>
     <el-form-item label="房源类型">
       <el-select v-model="form1.sign_type" placeholder="请选择">
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-select>
     </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="form1.tenant_phone" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="小区名称">
        <el-input v-model="form1.premise_name" placeholder="请输入小区名称"></el-input>
      </el-form-item>
      <el-form-item label="起租日期">
        <el-input type="date" v-model="form1.start_date"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getzukelist"  icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="remall">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      height="700px"
      width="400px"
      style="width: 100%">
      <el-table-column
        prop="tenant_name"
        label="租客姓名"
        width="80"
        height="10"
        >
      </el-table-column>
      <el-table-column
        prop="cf_contract_no"
        label="租房合同编号"
        width="100"
        height="10">
      </el-table-column>
      <el-table-column
        prop="tenant_phone"
        label="电话"
        width="100"
        height="10"  >
      </el-table-column>
      <el-table-column
        prop="house_name"
        label="房源信息"
        width="100"
        height="10"
       >
      </el-table-column>
      <el-table-column
        prop="sign_type"
        label="房源类型"
        width="100"
        height="10"
       >
        <template scope="scope">
          <span v-if="scope.row.sign_type==0">整租(分散型)</span>
          <span v-if="scope.row.sign_type==1">合租(分散型)</span>
          <span v-if="scope.row.sign_type==2">公寓(集中型)</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="start_date"
        label="起租日期"
        width="100"
        height="10"
        :formatter="dateFormat"
      >
      </el-table-column>
      <el-table-column
        prop="end_date"
        label="结束日期"
        width="100"
        height="10"
        :formatter="dateFormat"
      >
      </el-table-column>
      <el-table-column
        prop="payment_type"
        label="押付方式"
        width="100"
        height="10"
       >
        <template scope="scope">
          <span v-if="scope.row.payment_type==1">押1付1</span>
          <span v-if="scope.row.payment_type==2">押1付2</span>
          <span v-if="scope.row.payment_type==3">押1付3</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="deposit"
        label="押金"
        width="100"
        height="10"
      >
      </el-table-column>
      <el-table-column
        prop="month_rent"
        label="租金"
        width="100"
        height="10"
      >
      </el-table-column>
      <el-table-column
        prop="contract_state"
        label="状态"
        width="100"
        height="10"
      >
        <template scope="scope">
          <span v-if="scope.row.contract_state==1" style="color: #ff0000">草稿</span>
          <span v-if="scope.row.contract_state==2" style="color: #ff0000">已提交</span>
          <span v-if="scope.row.contract_state==3" style="color: red">已解约</span>
          <span v-if="scope.row.contract_state==4" style="color: red">已结束</span>
          <span v-if="scope.row.contract_state==9" style="color: red">作废</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.form1.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="this.form1.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
  </div>
</template>

<script>
  import momnet from  'moment'
  import {getzukelist} from "@/api/system/zuke";
    export default {
        name: "zuke",
      data(){
          return{
             form1:{
               pageNum:1,
               pageSize:10,
               tenant_name:'',
               sign_type:'',
               tenant_phone:'',
               premise_name:'',
               start_date:''.toString(),
      },
             total:0,
            tableData:[],
            options:[
              {
                label: '请选择',
                value: ''
              },
              {
                label:'整租（分散型）',
                value:'0',
              },
              {
                label:'合租（分散型）',
                value:'1',
              },
              {
                label:'公寓（集中型）',
                value:'2',
              }
            ]
        }
      },
      methods:{
        dateFormat(row, column) {
          var date = row[column.property];

          if(date == undefined){return ''};
          return momnet(date).format("YYYY/MM/DD")
        },
          getzukelist(){
            getzukelist(this.form1).then((res)=>{
                 this.tableData=res.data.list;
                 this.total=res.data.total;
            })
          },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.form1.pageSize=val;
          this.getzukelist();
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.form1.pageNum=val;
          this.getzukelist();
        },
        remall(){
             this.form1.tenant_name='';
             this.form1.sign_type='';
             this.form1.tenant_phone='';
             this.form1.premise_name='';
            this.form1.start_date='';
        }
      },
      mounted() {
           this.getzukelist();
      }
    }
</script>

<style scoped>

</style>
